<template>
	<view class="columnbox content">
		<!-- 		<view class="wdh-100 rowbox jus">
			<view class="rowbox store-box">{{name}}</view>
		</view> -->
		<view class="columnbox one-info als jus" @click="currentcoupon=index" :class="{'sel-box':index==currentcoupon}"
			v-for="(item,index) in infolist" :key='index'>
			<view class="rowbox info-rank">套餐{{index+1}}</view>
			<view class="rowbox wdh-100 spb" style="margin-top: 20rpx;">
				<view class="info-title">{{item.comboName}}</view>
				<view class="info-price rowbox">
					<view style="font-size: 28rpx;">¥</view>
					{{item.currentPrice}}
				</view>
			</view>
			<view class="rowbox wdh-100 spb c-desc" style="margin-top: 12rpx;">
				<text v-if="item.couponsTypeName">{{item.couponsTypeName}}</text>
				<text v-else>
					<text v-if="item.couponsNum==0">零钱充值</text>
				</text>
				<text v-if="item.couponsNum==0">充值{{item.currentPrice}}到零钱¥{{item.walletReceive}}</text>
				<text v-else>{{item.couponsNum}}张</text>
			</view>
			<view class="wdh-100 s-title">有效期</view>
			<text style="margin-top: 12rpx;">{{item.validity}}</text>
			<view class="wdh-100 s-title">购买须知</view>
			<text style="margin-top: 12rpx;">{{item.remark}}</text>
			<!-- <view class="rowbox wdh-100 spb info-btn">
				<view class="rowbox">
					<view class="info-price">{{item.currentPrice}}</view>
					<view class="info-origin">¥{{item.originalPrice}}</view>
				</view>
				<view class="rowbox info-num" v-if="item.couponsNum>0">{{item.couponsNum}}张</view>
			</view> -->
		</view>
		<view class="wdh-100" style="height: 200rpx;"></view>
		<view class="rowbox bottom-box" style="background: #353641;border: none;">
			<view class="rowbox pay-btn" @click="toPay">立即支付</view>
			<!-- <view class="rowbox pay-btn confirm-btn">开始洗车</view> -->
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				name: '',
				pageNum: 1,
				infolist: [],
				total: 0,
				currentcoupon: 0,
				submitflag: false,
				doorId: ''
			};
		},
		onLoad(options) {
			if (options.name) {
				this.name = options.name
			}
			if (options.doorId) {
				this.doorId = options.doorId
			}
			this.getCoupon()
		},
		onReachBottom() {
			if (this.infolist.length < this.total) {
				this.pageNum++
				this.getCoupon()
			}
		},
		methods: {
			getCoupon() {
				this.$req.get('/xcx/combo/list', {
					pageNum: this.pageNum,
					pageSize: 20,
					cityId: uni.getStorageSync('cityId')
				}).then(res => {
					if (res.data.code == 200) {
						this.infolist = this.infolist.concat(res.data.rows)
						this.total = res.data.total
					} else {
						uni.showLoading({
							title: '加载中'
						})
						setTimeout(() => {
							this.$req.get('/xcx/combo/list', {
								pageNum: this.pageNum,
								pageSize: 20,
								cityId: uni.getStorageSync('cityId')
							}).then(res => {
								uni.hideLoading()
								if (res.data.code == 200) {
									this.infolist = this.infolist.concat(res.data.rows)
									this.total = res.data.total
								}
							})
						}, 3000)
					}
				})
			},
			toPay() {
				if (!this.submitflag) {
					uni.showLoading({
						title: '加载中'
					})
					this.submitflag = true
					this.$req.post('/pay/combo', {
						comboId: this.infolist[this.currentcoupon].comboId
					}).then(res => {
						if (res.data.code == 200) {
							var info = res.data.data
							uni.requestPayment({
								provider: 'wxpay',
								timeStamp: info.timeStamp + '',
								nonceStr: info.nonceStr,
								package: info.packages,
								signType: info.signType,
								paySign: info.paySign,
								success: res => {
									uni.showToast({
										title: '支付成功'
									})
									if (this.doorId != '') {
										this.openDoor()
									} else {
										uni.navigateBack()
									}
								},
								fail: (err) => {
									this.submitflag = false
									uni.hideLoading()
								},
								complete() {
									this.submitflag = false
									uni.hideLoading()
								}
							});
						} else {
							this.submitflag = false
							uni.hideLoading()
							uni.showModal({
								title: '下单失败',
								content: res.data.msg
							})
						}
					})
				}
				// uni.navigateTo({
				// 	url: '/pages/store/confirmRecharge'
				// })
			},
			openDoor() {
				this.submitflag = true
				uni.showLoading({
					title: '加载中'
				})
				this.$req.get('/xcx/stationDoor/open/', {
					doorId: this.doorId,
					couponsId: ''
				}).then(res => {
					uni.hideLoading()
					this.submitflag = false
					if (res.data.code == 200) {
						uni.showModal({
							title: '洗车开门成功',
							complete: () => {
								uni.requestSubscribeMessage({
									tmplIds: [
										'367jNYYM4UKrQ7xzhqLz-Mt8-UeJvpa5FlQ50DZ_4dM',
										'S7dHsb73bp5orqZAZp-fc-1gEqVeo9BVfAT3p5aYPiQ'
									],
									success(res) {},
									fail(errMessage) {
										console.log("订阅消息 失败 ", errMessage);
									},
									complete: errMessage => {

									}
								})
								uni.redirectTo({
									url: '/pages/order/order'
								})
							}
						})
					} else {
						uni.showModal({
							title: res.data.msg
						})
					}
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.content {
		font-family: PingFang SC;
		background: #1F2028;
		min-height: 100vh;
		justify-content: flex-start;
	}

	.store-box {
		color: rgba(79, 79, 79, 1);
		font-size: 24rpx;
		background-color: rgba(244, 245, 247, 1);
		padding: 10rpx 20rpx;
		border-radius: 10rpx;
		margin-left: 20rpx;
		line-height: 40rpx;
	}

	.package-title {
		width: 100%;
		padding-left: 20rpx;
		font-size: 32rpx;
		margin-top: 20rpx;
		box-sizing: border-box;
	}

	.package-list {
		margin-top: 40rpx;
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
		align-items: flex-start;
		width: 100%;
		padding: 0 20rpx;
		box-sizing: border-box;
	}

	.one-info {
		width: 690rpx;
		// height: 378rpx;
		background: #292A33;
		border-radius: 24rpx;
		margin: 20rpx 0;
		position: relative;
		color: #FBDDBD;
		padding: 24rpx;

		text {
			color: #8F8F8F;
			font-family: PingFang SC, PingFang SC;
			font-weight: 400;
			font-size: 24rpx;
		}
	}

	.sel-box {
		background: #FBDDBD;
		color: #4C2F1B;

		text {
			color: #A28065;
		}
	}


	.info-rank {
		width: 114rpx;
		height: 32rpx;
		background: #C69670;
		font-family: PingFang SC, PingFang SC;
		font-weight: 800;
		font-size: 20rpx;
		color: #FFFFFF;
		position: absolute;
		left: 0;
		top: -10rpx;
		border-radius: 10rpx 10rpx 0 0;
	}

	.info-title {
		font-family: PingFang SC, PingFang SC;
		font-weight: 800;
		font-size: 28rpx;
		width: 400rpx;
	}

	.info-desc {
		margin-top: 20rpx;
		color: rgba(154, 154, 154, 1);
		font-size: 24rpx;
	}

	.info-btn {
		margin-top: 20rpx;
	}

	.info-price {
		font-family: PingFang SC, PingFang SC;
		font-weight: 800;
		font-size: 40rpx;
	}

	.info-origin {
		color: rgba(154, 154, 154, 1);
		font-size: 24rpx;
		text-decoration: line-through;
		margin-left: 10rpx;
	}

	.info-num {
		color: rgba(255, 94, 0, 1);
		border: rgba(255, 94, 0, 1) solid 1px;
		font-size: 24rpx;
		border-radius: 10rpx;
		padding: 0rpx 10rpx;
		line-height: 40rpx;
		white-space: nowrap;
	}

	.bottom-box {
		position: fixed;
		bottom: 0;
		left: 0;
		padding: 20rpx 32rpx;
		padding-bottom: 40rpx;
		z-index: 9;
		width: 100%;
		justify-content: space-between;
	}

	.pay-btn {
		width: 690rpx;
		height: 66rpx;
		background: linear-gradient(138deg, #FBE3C8 0%, #F6D0AE 100%);
		border-radius: 44rpx;
		font-family: PingFang SC, PingFang SC;
		font-weight: 800;
		font-size: 24rpx;
		color: #4C2F1B;
	}


	.c-desc {
		border-bottom: rgba(#393A3F, .4) solid 1px;
		padding-bottom: 20rpx;
	}

	.s-title {
		margin-top: 20rpx;
		font-family: PingFang SC, PingFang SC;
		font-weight: 400;
		font-size: 24rpx;
	}
</style>